<template>
	<view class="images">
		<view ref="imageli" class="image" v-for="(n,index) in data">
			<image :src="n" mode="" @click.stop="clickImage(index)"></image>
		</view>
	</view>
</template>

<script setup>
	
	import {
		ref,
	} from 'vue';
	
	const Emit =defineEmits(["click"])
	
	
	defineProps({
		data:{
			type:Array,default:()=> []
		}
	})
	
	function clickImage(index){
		Emit('click',index)
	}
	
	function resizeImageHeight(){
		// if(this.$refs["imageli"] && Array.isArray(this.$refs["imageli"])){
		// 	this.$refs["imageli"].forEach(item=>{
		// 		let el =  item.$el
		// 		let width = el.offsetWidth
		// 		el.style.height = width + "px"
		// 	})
		// }
	}
</script>

<style scoped>
	
	.images{
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}
	.image{
		width: 31%;
		height:160rpx;
		margin-bottom: 15rpx;
		margin-right: 3%;
		border-radius: 8rpx;
		overflow: hidden;
	}
	.image:nth-child(3n+3){
		margin-right: 0px;
	}
	.image image{
		width: 100%;
		height: 100%;
	}
	
</style>